<template>
  <div class="home">
    <div class="home-wrap">
      <div class="banner">
        <div class="banner-left">
          <div
            v-for="(item,index) in tabData"
            :key="item.banner_id"
            :ref="'bannerTab'+index"
            class="banner-left-item-wrap"
            @mouseover="bannerTwoOver(item,index)"
            @mouseout="bannerTwoOut(index)"
          >
            <img
              :src="item.detail.image"
              class="banner-item-icon"
            >
            <div class="banner-item-right-wrap">
              <div class="banner-item-text">
                {{ item.detail.name }}
              </div>
              <div class="banner-item-arrow" />
            </div>
          </div>
        </div>
        <div
          ref="bannerTwo"
          class="banner-left-hover"
          @mouseover="bannermouseoverOver"
          @mouseout="bannermouseoverOut"
        >
          <div
            v-for="item in bannerHoverData"
            :key="item.class_id"
          >
            <div class="banner-left-hover-title">
              {{ item.class_name }}
            </div>
            <div class="banner-left-hover-content-item-wrap">
              <div
                v-for="i in item.project"
                :key="i.project_id"
                class="banner-left-hover-content-item"
              >
                <nuxt-link :to="`/wiki/${i.project_id}`">
                  {{ i.project_name }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-swiper">
          <div class="swiper-wrap">
            <div v-swiper:mySwiper="swiper">
              <div class="swiper-wrapper">
                <div
                  v-for="item in bannerDatas"
                  :key="item.banner_id"
                  class="swiper-slide"
                >
                  <a
                    :href="item.detail.target.url"
                    nofollow
                  >
                    <img
                      class="banner-item"
                      :src="item.detail.image"
                      alt=""
                    >
                  </a>
                </div>
              </div>
              <div class="swiper-pagination swiper-pagination-bullets" />
            </div>
          </div>
        </div>
        <div class="banner-right">
          <div
            v-for="item in rightBanner"
            :key="item.banner_id"
          >
            <a
              :href="item.detail.target.url"
              nofollow
            >
              <img
                :src="item.detail.image"
                class="banner-right-item"
                alt=""
              >
            </a>
          </div>
        </div>
      </div>
      <div class="home-content">
        <div v-customLoading="loading" class="home-content-left">
          <div class="home-content-left-header-wrap">
            <div class="home-content-left-tab-wrap">
              <div
                v-for="item in diaryTabData"
                :key="item.banner_id"
                class="home-content-left-tab-item"
                :class="{active:active==item.detail.name}"
                @click="tab(item.detail)"
              >
                {{ item.detail.name }}
              </div>
            </div>
            <div class="home-content-left-more">
              <nuxt-link to="/diary">
                <div class="home-content-left-more-text">
                  更多
                </div>
              </nuxt-link>
              <div class="home-content-left-more-icon" />
            </div>
          </div>
          <div class="home-content-left-diary">
            <div class="home-content-left-diary-wrap">
              <DiaryList :diary-data="diaryData" />
              <div class="home-content-left-diary-pager">
                <Pager
                  :page-config="pageConfig"
                  :home-tab-name="tabName"
                  :home="true"
                  @changeCurrentPage="changeCurrentPage"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="home-content-right">
          <div class="home-content-doctor">
            <div class="home-content-doctor-title">
              <div class="home-content-doctor-left">
                <div class="home-content-doctor-left-icon" />
                <div class="home-content-doctor-left-text">
                  名医榜
                </div>
              </div>
              <div class="home-content-doctor-right">
                <nuxt-link to="/doctor">
                  <div class="home-content-doctor-right-text">
                    更多
                  </div>
                </nuxt-link>
                <div class="home-content-doctor-right-icon" />
              </div>
            </div>
            <div
              v-for="item in doctorData"
              :key="item.user_id"
              class="home-content-doctor-list"
            >
              <DoctorList :datas="item" />
            </div>
          </div>
          <div class="home-content-hospital">
            <div class="home-contetn-hospital-title">
              <div class="home-content-hospital-left">
                <div class="home-content-hospital-left-icon" />
                <div class="home-content-hospital-left-text">
                  机构榜
                </div>
              </div>
              <div class="home-content-hospital-right">
                <nuxt-link to="/hospital">
                  <div class="home-content-hospital-right-text">
                    更多
                  </div>
                </nuxt-link>
                <div class="home-content-hospital-right-icon" />
              </div>
            </div>
            <div
              v-for="item in hospitalData"
              :key="item.user_id"
            >
              <nuxt-link :to="`/hospital/${item.user_id}`">
                <div
                  class="home-content-hospital-item"
                  :style="{background: `url('${item.user_photo ? item.user_photo : ''}') center center no-repeat`,backgroundSize:'cover'}"
                />
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getBanner, getDiaryData, getSearchDiary, getDoctorData, gethospital, getBannerHover } from '@/api/home.js'
import DoctorList from '@/components/doctorList'
import DiaryList from '@/components/diaryList'
import Pager from '@/components/pagerTwo'
import { isBrowser } from '@/utils/util'
export default {
  components: {
    DiaryList,
    Pager,
    DoctorList
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [tabData, bannerDatas, rightBanner, diaryTabData, diary, doctorData, hospitalData] = await Promise.all([
      getBanner('pc_home_project').then((res) => {
        return res.data
      }),
      getBanner('pc_home_banner1').then((res) => {
        return res.data
      }),
      getBanner('pc_home_banner2').then((res) => {
        return res.data
      }),
      getBanner('diary_content_select').then((res) => {
        return res.data
      }),
      getDiaryData(1, 8).then((res) => {
        return res
      }),
      getDoctorData('intelligent', 'asc', 1, 5).then((res) => {
        return res.data
      }),
      gethospital('intelligent', 'desc', 1, 8).then(res => {
        return res.data
      })
    ])
    return {
      tabData,
      bannerDatas,
      rightBanner,
      diaryTabData,
      diary,
      doctorData,
      hospitalData
    }
  },
  serverCacheKey() {
    // Will change every 10 secondes
    return Math.floor(Date.now() / 10000)
  },
  data() {
    return {
      swiper: {
        loop: true,
        centeredSlides: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          // 轮播图滚动
          // slideChange(i) {
          //   console.log(i)
          // }
        }
      },
      active: '推荐',
      diaryData: [],
      tabName: '推荐',
      bannerHoverData: [],
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      },
      homeHover: [],
      tabActiveId: NaN,
      loading: false
    }
  },
  watch: {
    tabName(newValue) {
      if (this.tabName === '推荐') {
        this.getData(1)
      } else {
        this.getSearchData(1)
      }
    }
  },
  created() {
    this.pageConfig.total = this.diary.meta.total
    this.pageConfig.pageTotal = this.diary.meta.last_page
    this.diaryData = this.diary.data
    if (isBrowser()) {
      if (this.$route.query.tab) {
        this.tab({ name: decodeURIComponent(this.$route.query.tab) })
      }
    }
  },
  mounted() {
    this.tabData.forEach(item => {
      this.homeHover.push({
        name: item.detail.name,
        data: [],
        num: 0
      })
    })
  },
  methods: {
    tab(i) {
      this.loading = true
      this.active = i.name
      this.tabName = i.name
      this.pageConfig.pageNo = 1
      var codeName = encodeURIComponent(i.name)
      this.$router.push({ query: { tab: codeName }})
    },
    getData(page) {
      getDiaryData(page, 8).then((res) => {
        this.diaryData = res.data
        this.pageConfig.total = res.meta.total
        this.pageConfig.pageTotal = res.meta.last_page
        this.loading = false
      })
    },
    getSearchData(page) {
      getSearchDiary(this.tabName, page, 8).then((res) => {
        this.diaryData = res.data
        this.pageConfig.total = res.meta.total
        this.pageConfig.pageTotal = res.meta.last_page
        this.loading = false
      })
    },
    changeCurrentPage(page) {
      this.loading = true
      this.pageConfig.pageNo = page
      if (this.tabName === '推荐') {
        this.getData(page)
      } else {
        this.getSearchData(page)
      }
    },
    bannerTwoOver(i, index) {
      this.homeHover.forEach((item, index) => {
        if (item.name === i.detail.name) {
          if (!item.data.length && item.num === 0) {
            getBannerHover(i.detail.target.wiki_id).then(res => {
              this.homeHover[index].data = res.data.slice(0, 4)
              this.bannerHoverData = item.data
            })
            item.num = 1
          } else {
            this.bannerHoverData = this.homeHover[index].data
          }
        }
      })
      var doms = this.$refs['bannerTab' + index][0]
      doms.style.background = 'rgba(245,245,255,1)'
      doms.childNodes[2].childNodes[0].style.color = 'rgba(80, 76, 255, 1)'
      this.$refs.bannerTwo.style.display = 'block'
    },
    bannerTwoOut(index) {
      this.tabActiveId = index
      var doms = this.$refs['bannerTab' + index][0]
      doms.style.background = '#fff'
      doms.childNodes[2].childNodes[0].style.color = '#666'
      this.$refs.bannerTwo.style.display = 'none'
    },
    bannermouseoverOver() {
      var doms = this.$refs['bannerTab' + this.tabActiveId][0]
      doms.style.background = 'rgba(245,245,255,1)'
      doms.childNodes[2].childNodes[0].style.color = 'rgba(80, 76, 255, 1)'
      this.$refs.bannerTwo.style.display = 'block'
    },
    bannermouseoverOut() {
      var doms = this.$refs['bannerTab' + this.tabActiveId][0]
      doms.style.background = '#fff'
      doms.childNodes[2].childNodes[0].style.color = '#666'
      this.$refs.bannerTwo.style.display = 'none'
    }
  },
  head() {
    return {
      title: '容猫美容整形,微整形,容猫APP官网-好医生都在的美容微整社区及特卖平台',
      meta: [
        { hid: 'description',
          name: 'description',
          content: '容猫整形-为求美者提供专业变美咨询，变美很重要，更重要的是享受变美的喜悦，容猫整形专业社区，联合全国3000+专业整形医院、整形美容医疗机构，汇集国内外海量整形美容专家的专业医美免费交流社区。'
        }, {
          name: 'keywords', content: '容猫,容猫美容,容猫网,容猫app,美容,整形,整容,微整形,瘦脸,双眼皮,整形论坛,整形社区,整形app,整形特卖,整形点评,整形日记,韩国整形,医疗美容,双眼皮,隆鼻,激光美肤,脱毛,玻尿酸,明星整形'
        },
        {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: 'https://m.rongcat.com'
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  background: rgba(246, 246, 246, 1);
}
.home-wrap {
  width: 1190px;
  margin: 0 auto;
  overflow: hidden;
}
.banner {
  width: 100%;
  display: flex;
  margin-top: 10px;
  position: relative;
}
.banner-left {
  width: 200px;
  height: 380px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(237, 237, 237, 1);
  .banner-left-item-wrap {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
  }
  .banner-left-item-wrap:hover {
    cursor: pointer;
  }
  .banner-item-icon {
    width: 27px;
    height: 26px;
    margin-left: 20px;
  }
  .banner-item-text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }
  .banner-item-right-wrap {
    width: 110px;
    height: 26px;
    margin-left: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .banner-item-arrow {
    width: 4px;
    height: 8px;
    background: url("~assets/img/right-icon.png") center center no-repeat;
    background-size: 100% 100%;
  }
}
.banner-left-hover {
  width: 542px;
  height: 380px;
  background: rgba(255, 255, 255, 1);
  opacity: 0.96;
  padding: 10px 16px;
  position: absolute;
  top: 0;
  left: 200px;
  z-index: 10;
  overflow: hidden;
  display: none;
  .banner-left-hover-title {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    padding-bottom: 6px;
  }
  .banner-left-hover-content-item-wrap {
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 14px;
    margin-bottom: 14px;
  }
  .banner-left-hover-content-item {
    margin-left: 16px;
    margin-top: 10px;
    > a {
      color: rgba(153, 153, 153, 1);
    }
  }
  .banner-left-hover-content-item:hover {
    cursor: pointer;
  }
}
.banner-swiper {
  width: 630px;
  height: 380px;
  margin-left: 10px;
}
// .swiper-pagination-fraction,
// .swiper-pagination-custom,
// .swiper-container-horizontal > .swiper-pagination-bullets {
//   bottom: 0;
// }
.swiper-wrap {
  width: 630px;
  height: 380px;
  background: rgba(246, 246, 246, 1);
  border-radius: 4px;
  .banner-item {
    width: 630px;
    height: 380px;
    img{
      border-radius: 4px;
    }
  }
}
.banner-right-item {
  width: 340px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
}
.banner-right {
  width: 340px;
  height: 380px;
  margin-left: 10px;
  border-radius: 4px;
}
.home-content {
  width: 1190px;
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
  .home-content-left {
    width: 840px;
    height: 1504px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    padding: 0 20px;
    position: relative;
    .home-content-left-header-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .home-content-left-tab-wrap {
      width: 700px;
      display: flex;
      justify-content: space-around;
    }
    .home-content-left-tab-item {
      height: 38px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 42px;
      margin-top: 10px;
    }
    .home-content-left-tab-item:hover {
      cursor: pointer;
    }
    .active {
      font-weight: 600;
      color: rgba(80, 76, 255, 1);
      border-bottom: 2px solid rgba(80, 76, 255, 1);
    }
  }
  .home-content-left-more:hover {
    cursor: pointer;
  }
  .home-content-left-more {
    display: flex;
    align-items: center;
    margin-top: 10px;
    .home-content-left-more-text {
      font-size: 16px;
      font-weight: 500;
      color: rgba(216, 216, 216, 1);
      line-height: 22px;
    }
    .home-content-left-more-icon {
      width: 8px;
      height: 8px;
      margin-left: 4px;
      background: url("~assets/img/more-icon.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }
  .home-content-left-diary {
    width: 100%;
    // height: 1400px;
    margin-top: 22px;
  }
  .home-content-left-diary-pager {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -250px;
  }
  .home-content-right {
    width: 340px;
    height: 1247px;
    margin-left: 10px;
  }
  .home-content-doctor {
    width: 340px;
    height: 646px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    padding: 0 16px;
    overflow: hidden;
    .home-content-doctor-title {
      display: flex;
      justify-content: space-between;
      margin-top: 17px;
    }
    .home-content-doctor-left {
      display: flex;
      .home-content-doctor-left-icon {
        width: 12px;
        height: 14px;
        background: url("~assets/img/doctor-icons.png") center center no-repeat;
        background-size: 100% 100%;
        margin-top: 4px;
      }
      .home-content-doctor-left-text {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        margin-left: 8px;
      }
    }
    .home-content-doctor-right:hover {
      cursor: pointer;
    }
    .home-content-doctor-right {
      display: flex;
      align-items: center;
      .home-content-doctor-right-text {
        font-size: 16px;
        font-weight: 600;
        color: rgba(216, 216, 216, 1);
        line-height: 22px;
      }
      .home-content-doctor-right-icon {
        width: 8px;
        height: 8px;
        background: url("~assets/img/more-icon.png") center center no-repeat;
        background-size: 100% 100%;
        margin-left: 4px;
      }
    }
    .home-content-doctor-list {
      margin-top: 16px;
    }
  }
  .home-content-hospital {
    width: 340px;
    height: 591px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    justify-content: space-between;
    .home-contetn-hospital-title {
      width: 100%;
      height: 22px;
      display: flex;
      justify-content: space-between;
      margin-top: 17px;
      .home-content-hospital-left {
        display: flex;
        align-items: center;
      }
      .home-content-hospital-left-icon {
        width: 12px;
        height: 14px;
        background: url("~assets/img/doctor-icons.png") center center no-repeat;
        background-size: 100% 100%;
        margin-right: 8px;
      }
      .home-content-hospital-left-text {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
      .home-content-hospital-right:hover {
        cursor: pointer;
      }
      .home-content-hospital-right {
        display: flex;
        align-items: center;
        .home-content-hospital-right-text {
          font-size: 16px;
          font-weight: 600;
          color: rgba(216, 216, 216, 1);
          line-height: 22px;
        }
        .home-content-hospital-right-icon {
          width: 8px;
          height: 8px;
          background: url("~assets/img/more-icon.png") center center no-repeat;
          background-size: 100% 100%;
          margin-left: 4px;
        }
      }
    }
    .home-content-hospital-item {
      width: 150px;
      height: 120px;
      margin-top: 10px;
    }
    .home-content-hospital-item:hover {
      cursor: pointer;
    }
  }
}
</style>
